<template>
  <div>
    <el-row :gutter="15">
      <el-col :span="24">
        <el-form class="el-form-col" label-width="110px" label-position="left">
          <Portlet title="商家信息">
            <el-row :gutter="15">
              <el-col :lg="6" :md="12">
                <el-form-item label="商家编号:">
                  <span>{{ cargoOwnerInfo.updaterName }}</span>
                </el-form-item>
              </el-col>
              <el-col :lg="6" :md="12">
                <el-form-item label="商家名称:">
                  <span>{{ cargoOwnerInfo.cargoOwnerName }}</span>
                </el-form-item>
              </el-col>
              <el-col :lg="6" :md="12">
                <el-form-item label="商家联系人:">
                  <span>{{ cargoOwnerInfo.cargoOwnerPrin }}</span>
                </el-form-item>
              </el-col>
              <el-col :lg="6" :md="12">
                <el-form-item label="联系电话:">
                  <span>{{ cargoOwnerInfo.cargoOwnerPhone }}</span>
                </el-form-item>
              </el-col>
              <el-col :lg="6" :md="12">
                <el-form-item label="实际库存:">
                  <span>{{ cargoOwnerInfo.updaterName }}</span>
                </el-form-item>
              </el-col>
              <el-col :lg="6" :md="12">
                <el-form-item label="可用库存:">
                  <span>{{ cargoOwnerInfo.updaterName }}</span>
                </el-form-item>
              </el-col>
              <el-col :lg="6" :md="12">
                <el-form-item label="冻结库存:">
                  <span>{{ cargoOwnerInfo.updaterName }}</span>
                </el-form-item>
              </el-col>
              <el-col :lg="6" :md="12">
                <el-form-item label="总体积:">
                  <span>{{ cargoOwnerInfo.libraryPackageVolume }}  m³ </span>
                </el-form-item>
              </el-col>
              <el-col :lg="6" :md="12">
                <el-form-item label="总重量:">
                  <span>{{ cargoOwnerInfo.updaterName }}  kg </span>
                </el-form-item>
              </el-col>
              <el-col :lg="6" :md="12">
                <el-form-item label="开通仓:">
                  <span>{{ cargoOwnerInfo.updaterName }}</span>
                </el-form-item>
              </el-col>
              <el-col :lg="6" :md="12">
                <el-form-item label="开通人:">
                  <span>{{ cargoOwnerInfo.founderName }}</span>
                </el-form-item>
              </el-col>
              <el-col :lg="6" :md="12">
                <el-form-item label="开通时间:">
                  <span>{{ cargoOwnerInfo.foundtime | unixTimestampFilter }}</span>
                </el-form-item>
              </el-col>
            </el-row>
          </Portlet>
        </el-form>
      </el-col>
    </el-row>
    <el-row>
    </el-row>
    <!--新版：-->
    <el-row :gutter="15">
      <el-col :span="24">
        <el-form ref="searchForm" class="el-form-col search-form" :model="search">
          <el-row :gutter="15">
            <el-col :lg="4" :md="6">
              <el-form-item  prop="cargoOwnerCode">
                <el-input v-model="search.cargoOwnerCode" placeholder="所在仓库？"></el-input>
              </el-form-item>
            </el-col>
            <el-col :lg="4" :md="6">
              <el-form-item  prop="cargoOwnerName">
                <el-input v-model="search.cargoOwnerName" placeholder="厂家名称？"></el-input>
              </el-form-item>
            </el-col>
            <el-col :lg="4" :md="6">
              <el-form-item  prop="cargoOwnerName">
                <el-input v-model="search.cargoOwnerName" placeholder="商品名称？"></el-input>
              </el-form-item>
            </el-col>
            <el-col :lg="4" :md="6" class="hidden-lg-only hidden-xl-only">
              <el-form-item>
                <el-row class="search-btns" :gutter="5">
                  <el-col :span="12">
                    <el-button type="success" :loading="searchLoading" plain @click="searchFunc(search)"><span>搜索</span></el-button>
                  </el-col>
                  <!--<el-col :span="8">-->
                    <!--<el-button type="primary" plain @click="searchOpen = !searchOpen">{{ searchOpen ? '收起' : '展开' }}</el-button>-->
                  <!--</el-col>-->
                  <el-col :span="12">
                    <el-button @click="reset" plain>重置</el-button>
                  </el-col>
                </el-row>
              </el-form-item>
            </el-col>
            <el-col :lg="4" :md="6">
              <el-form-item prop="cargoOwnerPrin">
                <el-input v-model="search.cargoOwnerPrin" placeholder="厂家商品名称？"></el-input>
              </el-form-item>
            </el-col>
            <el-col :lg="4" :md="6">
              <el-form-item prop="cargoOwnerPhone">
                <el-input v-model="search.cargoOwnerPhone" placeholder="商品大类？"></el-input>
              </el-form-item>
            </el-col>
            <el-col :lg="4" :md="6" class="hidden-md-only hidden-sm-only">
              <el-form-item>
                <el-row class="search-btns" :gutter="5">
                  <el-col :span="12">
                    <el-button type="success" :loading="searchLoading" plain @click="searchFunc(search)"><span>搜索</span></el-button>
                  </el-col>
                  <!--<el-col :span="8">-->
                    <!--<el-button type="primary" plain @click="searchOpen = !searchOpen">{{ searchOpen ? '收起' : '展开' }}</el-button>-->
                  <!--</el-col>-->
                  <el-col :span="12">
                    <el-button @click="reset" plain>重置</el-button>
                  </el-col>
                </el-row>
              </el-form-item>
            </el-col>
            <el-col :lg="4" :md="6">
              <el-form-item prop="cargoOwnerPhone">
                <el-input v-model="search.cargoOwnerPhone" placeholder="商品小类？"></el-input>
              </el-form-item>
            </el-col>
            <el-col :lg="4" :md="6">
              <el-form-item prop="cargoOwnerPhone">
                <el-input v-model="search.cargoOwnerPhone" placeholder="包件编号？"></el-input>
              </el-form-item>
            </el-col>
            <el-col :lg="4" :md="6">
              <el-form-item prop="cargoOwnerPhone">
                <el-input v-model="search.cargoOwnerPhone" placeholder="包件名称？"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </el-col>
      <el-col :span="24">
        <BasicTable
          ref="BasicTable"
          url="/ms-warehouse-order/longOwner/findCargoRuningList"
          :initParams="{cargoOwnerId: this.id}"
          :columns="columns"
        >
        </BasicTable>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import {filterDataBaseDictionary, decimalNumFilter, unixTimestampFilter} from '@/filters'
import {copy} from '@/utils'
import Pagination from '@/components/Pagination'
export default {
  name: 'warehouseOwnerLongtermStorageShow',
  components: {
    Pagination
  },
  filters: {
    unixTimestampFilter,
    filterDataBaseDictionary,
    decimalNumFilter
  },
  data() {
    return {
      searchLoading: false,
      id: this.$route.params.id,
      rowPackageArr: [],
      search: {
        // productNo: '',
        // productName: '',
        // cargoOwnerCode: '',
        // cargoOwnerName: '',
        // cargoOwnerPrin: '',
        // cargoOwnerPhone: ''
      },
      searchOpen: false,
      model: {},
      rules: {},
      cargoOwnerInfo: {},
      columns: [
        {label: '厂家名称', data: 'manufacturersName'},
        {label: '商品编号', data: 'cargoOwnerId'},
        {label: '商品名称', data: 'productName'},
        {label: '商品大类', data: 'code'},
        {label: '商品小类', data: 'color'},
        {label: '规格', data: 'standard'},
        {label: '包件编号', data: 'confirmName'},
        {label: '包件名称', data: 'consigneName'},
        {label: '实际库存', data: 'customProperty'},
        {label: '可用库存', data: 'location'},
        {label: '冻结库存', data: 'storageType'},
        {label: '单包件体积', data: 'companyName'},
        {label: '单包件重量', data: 'name'},
        {label: '包件单位', data: 'orderType'},
        {label: '所在仓库', data: 'outNum'},
        {
          label: '所在库位',
          data: 'confirmTime',
          render(data, type, full, meta) {
            return unixTimestampFilter(data)
          }
        }
      ]
    }
  },
  created() {
    this.getDetail() // 请求头部：商家信息
  },
  methods: {
    searchFunc() {
      const basicTable = this.$refs.BasicTable
      if (basicTable) {
        let params = copy(this.search)
        this.searchLoading = true
        basicTable.search(params).finally(_ => {
          this.searchLoading = false
        })
      }
    },
    // reset 重置搜索框
    reset(searchForm) {
      this.$refs.searchForm.resetFields()
    },
    // 商家信息
    getDetail() {
      this.$ajax.get('/ms-warehouse-order/longOwner/findLongtimeOwnerInfo', {cargoOwnerId: this.id}).then(response => {
        if (!response.data) {
          return
        }
        this.cargoOwnerInfo = response.data || {}
      })
    }
  }
}
</script>
